<template>
  <!-- 编辑框 -->
  <a-modal
      :title="title"
      :visible="dialog"
      @ok="submitForm"
      @cancel="handleCancel"
      width="500px"
  >
    <a-form-model ref="form"
                  :model="form"
                  :rules="rules">
      <a-row  >
        <a-col >
          <a-form-model-item label="所属专业" prop="majorId">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.majorId"
                placeholder="请选择专业">
              <a-select-option
                  v-for="major in majors"
                  :key="major.id"
                  :value="major.id"
              >{{major.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="年级" prop="grade">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.grade"
                placeholder="请选择年级">
              <a-select-option
                  v-for="grade in grades"
                  :key="grade.id"
                  :value="grade.grade"
              >{{grade.grade}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="班级号" prop="classNum" class="row">
            <a-input v-model="form.classNum" type="number" />
          </a-form-model-item>
          <a-form-model-item label="学生人数" prop="peopleNum" class="row">
            <a-input v-model="form.peopleNum" type="number" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import {editClass} from "@/services/class";
const defaultForm = {
  majorId: '',
  grade: '',
  classNum: '',
  peopleNum: ''
};

export default {
  name: "FormDialog",
  props: {
    majors: [],
    grades: []
  },
  data() {
    return {
      title: "添加",
      dialog: false,
      isModalVisible: false,
      loading: true,
      form: {},
      rules: {
        majorId: [
          { required: true, message: '请选择专业', trigger: 'blur' },
        ],
        grade: [
          { required: true, message: '请选择年级', trigger: 'blur' },
        ],
        classNum: [
          { required: true, message: '请输入班级号', trigger: 'blur' },
          { pattern: /^[1-9]$/, required: true, message: "班级号应该为1-9之间的整数", trigger: "blur" },
        ],
        peopleNum: [
          { required: true, message: '请输入该班学生人数', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, required: true, message: "学生人数应该为正整数", trigger: "blur" },
        ],
      }
    };
  },
  watch: {
  },
  created() {
    this.form = Object.assign({}, defaultForm);
  },
  methods: {
    resetForm() {
      this.form = Object.assign({}, defaultForm);
    },
    submitForm() {
      console.log(this.form)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          const clazz = this.form;
          const that = this;
          editClass(clazz)
              .then((resp) => {
                let result = resp.data;
                if (result.code == 200) {
                  that.$message.success("操作成功", 2);
                  this.$emit("success");
                  that.resetForm();
                }else {
                  that.$message.error(result.message)
                }
                that.dialog = false;
              })
              .catch((res) => {
                this.loading = false;
                this.$message.error(res.response.data.message);
              });
          this.$emit("success");
          this.handleCancel();
        }
      });
    },
    handleCancel() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
      this.form = Object.assign({}, defaultForm);
      this.loading = false;
      this.dialog = false;
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style type="text/css">
.row {
  margin: 0 auto;
}
</style>
